<!---角色下的用户列表--->
<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <!-- <div class="filter-container"> -->
    <el-row>

      <el-input
        v-model="keystr"
        clearable
        class="filter-item"
        style="width: 200px;marginRight:12px"
        placeholder="姓名/登录名 或 联系电话"
      />

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="marginRight:12px;"
        @click="queryUserRoleById"
      >搜索</el-button>
      <el-button
        class="filter-item"
        type="text"
        @click="handleAddUser"
      >新增</el-button>

    </el-row>

    <!-- </div> -->

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      style="marginTop:12px;"
    >
      <el-table-column
        align="center"
        width="100px"
        label="序号"
        prop="userRoleId"
        sortable
      />

      <el-table-column
        align="center"
        label="姓名/登录名"
        prop="account"
      />
      <el-table-column
        align="center"
        label="联系电话"
        prop="mobile"
      />
      <el-table-column
        align="center"
        label="负责项目"
        prop="project"
      />

      <el-table-column
        align="center"
        label="操作"
        width="250"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="delBtnClickHandle(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getUserList"
    />
    <!-- 用户编辑对话框 -->
    <el-dialog
      :visible.sync="showEditAlert"
      title="请选择"
      width="40%"
    >
      <el-row :gutter="12">
        <el-col :span="20">
          <el-input
            clearable
            class="filter-item"
            placeholder="姓名/登录名 或 联系电话"
            style="marginRight:12px;"
            v-model="userSearchKey"
          />
        </el-col>
        <el-col :span="4">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="netFindSysUser"
          >搜索</el-button>
        </el-col>
      </el-row>

      <el-table
        @selection-change="handleDialogSelect"
        v-loading="listLoading"
        :data="userList"
        border
        fit
        highlight-current-row
        style="marginTop:12px;"
      >
        <el-table-column
          align="center"
          type="selection"
        />
        <el-table-column
          align="center"
          label="姓名/登录名"
          prop="account"
        />
        <el-table-column
          align="center"
          label="联系电话"
          prop="mobile"
        />
      </el-table>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="netSaveRoleAndUser"
        >确定</el-button>
        <el-button
          type="default"
          @click="showEditAlert = false"
        >取消</el-button>
      </div>
    </el-dialog>

    <!-- 删除对话框 -->
    <el-dialog
      title="确认删除"
      :visible.sync="showDelAlert"
      width="40%"
    >
      <span>确认删除 {{currentUser.account}} 用户信息</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="default"
          @click="showDelAlert = false"
        >取消</el-button>
        <el-button
          type="danger"
          @click="netDeleteRoleAndUser"
        >删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryUserRoleById,
  saveRoleAndUser,
  deleteRoleAndUser,
} from "@/api/role";
import { findSysUser, userlist } from "@/api/user";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "User",
  components: { Pagination },
  props: ["id"],
  watch: {
    id(v, ol) {
      this.queryUserRoleById();
    },
  },
  data() {
    return {
      keystr: undefined,
      listLoading: false,
      pageNum: 1,
      pageSize: 30,
      total: 0,
      list: [],
      showEditAlert: false,
      showDelAlert: false,
      currentUser: {},

      userSearchKey: undefined,
      userList: [],
      selectdUserList: [],
    };
  },
  created() {
    // this.getUserList();
    this.netFindSysUser();
  },
  mounted() {},
  methods: {
    queryUserRoleById() {
      let self = this;
      this.listLoading = true;
      queryUserRoleById({ id: this.id, name: this.keystr })
        .then((response) => {
          self.list = response;
          self.listLoading = false;
        })
        .catch(() => {
          self.list = [];
          self.total = 0;
          self.listLoading = false;
        });
    },
    /// 新增角色关系用户列表
    netFindSysUser() {
      let self = this;
      userlist({ name: this.userSearchKey })
        .then((response) => {
          let { list } = response;
          self.userList = list;
        })
        .catch(() => {});
    },

    //编辑
    editBtnClickHandle(data) {
      this.currentUser = data;
      this.showEditAlert = true;
    },
    //删除
    delBtnClickHandle(data) {
      this.currentUser = data;
      this.showDelAlert = true;
    },
    handleAddUser() {
      if (this.id == undefined || this.id == "") {
        this.$message.error("请先选择角色");
        return;
      }
      this.showEditAlert = true;
    },
    handleDialogSelect(e) {
      this.selectdUserList = e;
      console.log(this.selectdUserList);
    },

    netSaveRoleAndUser() {
      let userRole = [];
      let self = this;
      for (let index = 0; index < this.selectdUserList.length; index++) {
        const { id } = this.selectdUserList[index];
        let data = {
          isDelete: 0,
          roleId: this.id,
          userId: id,
        };
        userRole.push(data);
      }
      saveRoleAndUser(userRole)
        .then((response) => {
          self.$message.success("操作成功");
          self.showEditAlert = false;
          self.queryUserRoleById();
        })
        .catch(() => {});
    },
    netDeleteRoleAndUser() {
      let self = this;
      deleteRoleAndUser(this.currentUser)
        .then((response) => {
          self.$message.success("操作成功");
          self.showDelAlert = false;
          self.queryUserRoleById();
        })
        .catch(() => {});
    },
  },
};
</script>
